
<style lang="less" scoped>
// .answer-page-content {
//   margin: 10px 60px;
// }
</style>

<template>
  <!-- 自己回答 -->
  <div class="reply-form">
    <Row>
      <!-- <Col span="2"> -->
        <!-- TODO 这个用户名从store 中的用户信息中获取 -->
        <!-- <Tag class="user-name-postion" color="geekblue">李龙</Tag> -->
      <!-- </Col> -->
      <Col >
        <Card :bordered="false">
          <!-- <p slot="title">{{title}}</p> -->
          <Form ref="ReplyFormRef" :model="replyForm" v-show="isShow">
            <FormItem prop="content" disabled>
              <edite-page
                :formObj="replyForm"
                :isReset="contentIsReset"
                @editChange="changeButtonDisable"
              ></edite-page>
            </FormItem>
            <div style="overflow:hidden;">
              <Button :disabled="disabled" style="float:right;" @click="handleReply()">
                <Icon type="ios-undo-outline"/>提交
              </Button>
            </div>
          </Form>
          <div v-show="!isShow" style="text-align:center;color:#ff9900;">
            <p>两分钟之后可再次回复</p>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
import editePage from '@/view/components/editor/editor.vue'

export default {
  name: 'ReplyForm',
  props: {
    formObj: {
      type: Object,
      required: true
    }
  },
  components: {
    editePage
  },
  data () {
    return {
      disabled: true,
      replyForm: {},
      contentIsReset: false, // 富文本编辑框是否重置
      isShow: true
    }
  },
  computed: {},
  methods: {
    // 提交回答信息
    handleReply () {
      // 验证通过 调用父组件的方法，不通过显示错误信息
      if (1) {
        // TODO 写验证信息
        this.formObj.content = this.replyForm.content
        this.$emit('handleSubmit', this.formObj)
      } else {
        this.$Message.errow('验证不通过')
      }
    },

    // 改变标识符，用于回复框中的内容没变之前不允许编辑
    changeFlag (answer) {
      if (answer.flag) {
        answer.flag = false
      } else {
        answer.flag = true
      }
    },

    // 界面按钮等的锁定
    lockUI () {
      this.disabled = true
      this.isShow = false
      let time = 2 * 60 * 1000
      setTimeout(() => {
        // 两分钟之内不允许再次回复
        this.disabled = false
        this.isShow = true
      }, time)
      this.handleReset()
    },
    // 重置表单
    handleReset () {
      this.$refs['ReplyFormRef'].resetFields()
      this.replyForm = {}
      this.contentIsReset = true
      setTimeout(() => {
        // 解决第二次重置，富文本框中内容不消失
        this.contentIsReset = false
      }, 1000)
    },
    changeButtonDisable () {
      if (this.disabled) this.disabled = false
    },
    // 界面初始化方法
    init () {

    }
  },

  watch: {

  },

  mounted: function () {
    this.init()
  }
}
</script>
